<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 一,什么是jsx?
      // render(h) {
      //   console.log(h)
      //   console.log(this)
      //   const { msg, handerClick } = this
      //   // 注意render函数只能返回一个根节点
      //   return (
      //     <div class='box'>
      //       {/* 01.绑定class */}
      //       <p class='title' style={{ color: "red", marginLeft: "15px" }}>
      //         张三
      //       </p>
      //       {/* 02.父组件传递过来的数据 */}
      //       <p>{msg}</p>
      //       {/* 03.点击按钮绑定事件 */}
      //       <button onClick={($event) => handerClick($event)}>
      //         点我给父组件传参
      //       </button>
      
      //     </div>
      //   )
      // },
      // 这种在 JavaScript 里面写 HTML 的语法，就叫做 JSX，可以说是对 JavaScript 语法的一个扩展

      // 二,template和jsx的优点和缺点?
      /** 1.jsx优点:
       *     01.可以利用 js 来表达各种各样的逻辑，十分灵活
       *     02.如果是用 tsx 编写的组件，用户是可以享受到 props 的类型提示的
       *  2.jsx缺点:
       *     01.编译优化
       *     02.可读性差:这个其实也是过于灵活带来的后遗症，就是因为太灵活了,所以在维护的时候会比较麻烦
       */

      /** 3.template优点:
       *     01.可读性高:基于 dom 结构,很容易就可以看清楚代码要表达的意图,通过 vue 的指令和语法，一眼就能确定逻辑在哪里
       *  4.template缺点
       *     01.不够灵活,代码笨重
       *     02.sfc享受不到props的类型提示,这对组件库来说是一个很不好的体验
       */

      //  三,总结
      //  因为jsx的表达能力比template更强,jsx的能力上限是js本身,而template表达能力上限是Vue的各种指令如v-if,v-for等
    </script>
  </body>
</html>
